<!doctype html>
<html lang="en">
  <head>
    <title>Vis Network | Node Styles | Selected/Unselected Image</title>

    <script
      type="text/javascript"
      src="../../../standalone/umd/vis-network.min.js"
    ></script>

    <style type="text/css">
      body {
        font: 10pt arial;
      }
      #mynetwork {
        width: 600px;
        height: 600px;
        border: 1px solid lightgray;
      }
    </style>
  </head>

  <body>
    <div id="mynetwork"></div>
    <script type="text/javascript">
      // create an array with nodes
      var nodes = new vis.DataSet([
        {
          id: 1,
          shape: "image",
          size: 20,
          label: "No select image",
          image: "./unselected.svg",
        },
        {
          id: 2,
          shape: "image",
          size: 20,
          label: "Select image broken",
          image: {
            unselected: "./unselected.svg",
            selected: "./BROKEN_LINK/selected.svg",
          },
        },
        {
          id: 3,
          shape: "image",
          size: 20,
          label: "Select works!",
          image: {
            unselected: "./unselected.svg",
            selected: "./selected.svg",
          },
          shapeProperties: {
            borderDashes: [15, 5],
            interpolation: false,
          },
        },
      ]);

      // create an array with edges
      var edges = new vis.DataSet([
        { from: 1, to: 2 },
        { from: 2, to: 3 },
      ]);

      // create a network
      var container = document.getElementById("mynetwork");

      // provide the data in the vis format
      var data = {
        nodes: nodes,
        edges: edges,
      };

      var options = {
        layout: {
          randomSeed: 5,
        },
        nodes: {
          brokenImage: "./broken-image.png",
        },
      };
      // initialize!
      var network = new vis.Network(container, data, options);
    </script>
  </body>
</html>
